<template>
    <a-form ref='formRef' :label-col='{span : 3}' :model='formData'>
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label='学校名称' name='name' :rules="[{required : true, message : '请填写学校名称'}]">
            <a-input type='text' v-model:value='formData.name' show-count :maxlength="50"  />
        </a-form-item>
        <template v-if="formData.id == 0">
            <a-form-item label='管理员账号' name='adminAccount' :rules="[{required : true, message : '请填写管理员账号'}]">
                <a-input v-model:value='formData.adminAccount' :maxlength="30" show-count />
            </a-form-item>
            <a-form-item label='管理员名称' name='adminName'>
                <a-input v-model:value='formData.adminName' :maxlength="10" show-count />
            </a-form-item>
            
            <a-form-item label='管理员密码' name='adminPassword' :rules="[{required : false, validator : pwdValidator}]">
                <a-input-password v-model:value='formData.adminPassword' :maxlength="30" show-count />
            </a-form-item>
        </template>
        <a-form-item label='权限' name='roles'>
            <a-select v-model:value="formData.roles" :options="roleOptions"  mode="multiple" style="width: 100%" :field-names="{ label: 'name', value: 'id'}" />
        </a-form-item>
        <a-form-item label='排序' name='sort'>
            <a-input type='number' v-model:value='formData.sort' />
        </a-form-item>
        <a-form-item label='启用' name='enable'>
            <a-switch v-model:checked='formData.enable' checked-children='启用' un-checked-children='禁用'/>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
import { optionsMerchantApi as roleListApi} from '@/api/system/Role'
    import { saveApi } from '@/api/School';
    import RichEditor from '@/components/RichEditor.vue'
        import { PlusOutlined } from '@ant-design/icons-vue';
        import { ref } from 'vue';
import { Modal } from "ant-design-vue";
import { uploadApi } from "@/api/Upload";
import { Rule } from 'ant-design-vue/es/form';

    const props = defineProps<{
        row? : any;
        category? : number
    }>()

    const coverList = ref<any[]>([])

    const locales = ref<any[]>([])

    const formRef = ref()

    const roleOptions = ref<any[]>([])
    
    const formData = ref<any>({
        id : 0,
        name : '',
        sort : 1,

        enable : true,
        roles : [],
        adminAccount : '',
        adminName : '',
        adminPassword : ''

    })

    if(props.row) {
        for(let k in props.row) {
            if(k in formData.value) {
                formData.value[k] = props.row[k]
            }
        }

        if(props.row.admin && props.row.admin.roles) {
            formData.value.roles = props.row.admin.roles
        }

        if(props.row.logo) {
            coverList.value[0] = {
                status : 'done',
                url : import.meta.env.B_NET_STATIC_URL + props.row.logo
            }
        }

    }

    const pwdValidator = async (_rule: Rule, value: string) => {
        
        if(value.length > 0) {
            if(value.length < 6) {
                return Promise.reject("密码长度至少6位");
            }
        }

    
        return Promise.resolve()
    }

    async function submit() {
        let params  = await formRef.value.validate()
        params.excerpt = formData.value.excerpt
        if('sort' in params && params.sort === '') {
            params.sort = 0
        }else {
            params.sort = Number(params.sort)
        }


        return saveApi(params)
    }


    function uploadCover(e) {
        if(e.file.size > 1024 * 1024) {
            Modal.error({
                title : '图片不能大于1M'
            })
            return
        }



        uploadApi(e.file).then(res => {
            coverList.value[0].status = 'done'
            coverList.value[0].url = import.meta.env.B_NET_STATIC_URL + res.data
            formData.value.logo = res.data

            formRef.value.validateFields(['logo'])
        })
    }

    function beforeUpload(file:File, field:FormField) {
        return true
    }

    roleListApi().then(res => {
        if(res.data) {
            roleOptions.value = res.data
        }
        
    })

    defineExpose({
        submit
    })
</script>